<template>
  <div>
    <el-tabs type="border-card">
          <!--商品基本信息  -->
      <el-tab-pane label="商品基本信息">
        {{dataForm.desc.specificationItems}}
        <el-form ref="form" :model="dataForm" label-width="80px">
          <el-form-item label="活动名称">
            <el-select v-model="dataForm.goods.category1Id"  placeholder="一级分类">
              <el-option
                v-for="item in category1"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="dataForm.goods.category2Id"  clearable style="margin-left: 20px;"  placeholder="二级分类">
              <el-option 
                v-for="item in category2" 
                :key="item.id" 
                :label="item.name" 
                :value="item.id">
              </el-option>
            </el-select>
              <el-select v-model="dataForm.goods.category3Id"  clearable style="margin-left: 20px;" placeholder="三级分类">
                <el-option
                v-for="item in category3"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> 
          <el-form-item label="商品名称">
            <el-col :span="10">
              <el-input v-model="dataForm.goods.goodsName"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品品牌">
            <el-col :span="10">
              <el-select v-model="dataForm.goods.brandId"  placeholder="品牌">
                <el-option
                  v-for="item in brands"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="商品副标题">
            <el-col :span="10">
              <el-input v-model="dataForm.goods.caption"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-col :span="10">
              <el-input  v-model="dataForm.goods.price"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品介绍">
            <el-col :span="10">
              <el-input v-model="dataForm.desc.introduction"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="包装列表">
            <el-col :span="10">
              <el-input v-model="dataForm.desc.packageList"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="售后服务">
            <el-col :span="10">
              <el-input v-model="dataForm.desc.saleService"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!--  商品图片-->
      <el-tab-pane label="商品图片">
        {{dataForm.desc.itemImages}}
        <el-button type="primary" @click="addpic">添加图片</el-button>
        <el-table
        :data="dataForm.desc.itemImages"
        stripe
        style="width: 100%">
          <el-table-column
            prop="color"
            label="颜色"
            width="220">
          </el-table-column>
          <el-table-column
            prop="url"
            label="图片"
            width="400">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100px">
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="primary" @click="dataForm.desc.itemImages.splice(scope.$index,1)">删除</el-button> 
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 扩展属性 -->
      <el-tab-pane label="扩展属性">
        <el-table
        :data="dataForm.desc.customAttributeItems"
        style="width: 100%">
          <el-table-column
            align="center"
            width="180">
            <template slot-scope="scope">
              {{scope.row.text}}
              </template>
            </el-table-column>

            <el-table-column
              label="图片"
              align="center"
              width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.value" placeholder="属性名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 规格 -->
      <el-tab-pane label="规格">
        {{checkBoxList}}
          <el-table
            :data="template"
            style="width: 100%">
            <el-table-column
              prop="one"
              label="日期"
              style="width: 30%">
            </el-table-column>
            <el-table-column
              prop="many"
              label="姓名"
              style="width: 70%">
              <template slot-scope="scope">
                <el-checkbox-group v-model="checkBoxList" size="small" >
                  <div  v-for="name in scope.row.many"  style="float:left" @change="selected" >
                    <el-checkbox :label=scope.row.one+sign+name border >{{name}}</el-checkbox>
                  </div> 
                </el-checkbox-group>
             </template>
            </el-table-column>
          </el-table>
          <el-table
          :data="dataForm.tbItems"
          style="width: 100%">
          <el-table-column
            v-for="(specfication,key) in dataForm.desc.specificationItems"
            :key="key"
            align="center"
            :label="specfication.attributeName"
            width="200">
            <template slot-scope="scope">
              {{scope.row.spec[specfication.attributeName]}}
            </template>
          </el-table-column>
          <el-table-column label="标题"  align="center">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.title"/>
            </template>
          </el-table-column>
          <el-table-column label="价格"  align="center">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.price"/>
            </template>
          </el-table-column>
          <el-table-column label="数量"  align="center">
            <template slot-scope="scope">
              <el-input  type="text" v-model="scope.row.num"/>
            </template>
          </el-table-column>
        </el-table>
         <el-row :gutter="20">
          <el-col  :span="6" :offset="9">
            <el-button type="primary"  @click="saveDataForms">保存</el-button>
            <el-button>返回列表</el-button>
          </el-col>
         </el-row>
      </el-tab-pane>
    </el-tabs>
    <!-- 添加图片弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <!-- 啦啦啦啦 -->
      <el-form ref="form"  label-width="80px">
          <span>
            <el-form-item label="颜色">
              <el-col :span="18">
                <el-input v-model="itemImg.color"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item >
              <el-upload 
                action=""
                class="upload-demo"
                :file-list="fileList"
                :http-request="uploadPic"
                list-type="picture">
                <el-button size="small" type="primary" style="width:240px">点击上传图片</el-button>
                <div slot="tip" class="el-upload__tip" >只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </span>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="savePic">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        brands: [],
        arrItems: [],
        sign: '/',
        checkBoxList: [],
        template: [],
        flag: false,
        category1: [],
        category2: [],
        category3: [],
        options: [],
        fileList: [],
        itemImg: {
          color: '',
          url: ''
        },
        dialogVisible: false,
        dataForm: {
          goods: {
            goodsName: '',
            brandId: '',
            caption: '',
            category1Id: '',
            category2Id: '',
            category3Id: '',
            price: 0.0,
            typeTemplateId: ''
          },
          desc: {
            goodsId: 0,
            introduction: '',
            specificationItems: [],
            customAttributeItems: [],
            itemImages: [],
            packageList: '',
            saleService: ''
          },
          tbItems: []
        },
        tbItem: {
          title: '',
          price: 0.0,
          num: 0,
          categoryid: 0,
          status: 0,
          spec: {},
          brand: ''
        }
      }
    },
    computed: {
      category1Watch () {
        return this.dataForm.goods.category1Id
      },
      category2Watch () {
        return this.dataForm.goods.category2Id
      },
      category3Watch () {
        return this.dataForm.goods.category3Id
      },
      typeTemplateIdWatch () {
        return this.dataForm.goods.typeTemplateId
      }
    },
    activated () {
      this.getCategory1()
      this.findById()
    },
    watch: {
      category1Watch (newV, oldV) {
        this.$http({
          url: this.$http.adornUrl(`/shop/itemcat/category/${newV}`),
          method: 'post'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.category2 = data.category
            // delete this.dataForm.goods.category2Id
          }
        })
      },
      category2Watch (newV, oldV) {
        this.$http({
          url: this.$http.adornUrl(`/shop/itemcat/category/${newV}`),
          method: 'post'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.category3 = data.category
            // delete this.dataForm.goods.category3Id
          }
        })
      },
      category3Watch (newV, oldV) {
        this.$http({
          url: this.$http.adornUrl(`/shop/itemcat/info/${newV}`),
          method: 'post'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.goods.typeTemplateId = data.itemCat.typeId
          }
        })
      },
      typeTemplateIdWatch (newV, oldV) {
        this.$http({
          url: this.$http.adornUrl(`/shop/typetemplate/template/${newV}`),
          method: 'post'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.template = data.template
          }
        })
        if (!this.$route.query.id) {
          this.$http({
            url: this.$http.adornUrl(`/shop/typetemplate/info/${newV}`),
            method: 'post'
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.desc.customAttributeItems = JSON.parse(data.typeTemplate.customAttributeItems)
              this.brands = JSON.parse(data.typeTemplate.brandIds)
            }
          })
        }
      }
    },
    methods: {
      findById () {
        let id = this.$route.query.id
        if (id) {
          this.checkBoxList = []
          this.$http({
            url: this.$http.adornUrl(`/shop/goods/one/${id}`),
            method: 'get'
          }).then(({data}) => {
            console.log(data)
            this.dataForm = data.dataForm
            this.dataForm.desc.customAttributeItems = JSON.parse(this.dataForm.desc.customAttributeItems)
            this.dataForm.desc.itemImages = JSON.parse(this.dataForm.desc.itemImages)
            this.dataForm.desc.specificationItems = JSON.parse(this.dataForm.desc.specificationItems)
            this.dataForm.tbItems.forEach(item => {
              item.spec = JSON.parse(item.spec)
            })
            this.dataForm.desc.specificationItems.forEach(spec => {
              spec.attributeValue.forEach(name => {
                this.checkBoxList.push(spec.attributeName + '/' + name)
              })
            })
          })
        }
      },
      saveDataForms () {
        this.dataForm.tbItems.forEach(v => {
          v.spec = JSON.stringify(v.spec)
        })
        this.dataForm.desc.itemImages = JSON.stringify(this.dataForm.desc.itemImages)
        this.dataForm.desc.customAttributeItems = JSON.stringify(this.dataForm.desc.customAttributeItems)
        this.dataForm.desc.specificationItems = JSON.stringify(this.dataForm.desc.specificationItems)
        this.$http({
          url: this.$http.adornUrl(`/shop/goods/${this.$route.query.id ? 'update' : 'save'}`),
          method: 'post',
          data: this.$http.adornData({
            'goods': this.dataForm.goods,
            'desc': this.dataForm.desc,
            'tbItems': this.dataForm.tbItems
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            if (this.dataForm.id) {
              this.$router.go(-1)
            } else {
              this.$router.go(0)
            }
          }
        })
      },
      selected (v) {
        this.dataForm.desc.specificationItems = []
        if (this.checkBoxList) {
          let keyBox = new Map()
          this.checkBoxList.forEach(t => {
            if (!keyBox.has(t.split('/')[0])) {
              let arrBox = []
              arrBox.push(t.split('/')[1])
              keyBox.set(t.split('/')[0], arrBox)
            } else {
              let temp = keyBox.get(t.split('/')[0])
              temp.push(t.split('/')[1])
              keyBox.set(t.split('/')[0], temp)
            }
            this.dataForm.desc.specificationItems = []
            keyBox.forEach((v, k) => {
              this.dataForm.desc.specificationItems.push({'attributeName': k, 'attributeValue': v})
            })
            // this.dataForm.desc.specificationItems.push({"attributeName":t.split('/')[0]})
          })
          this.getAddItem()
        }
      },
      getAddItem () {
        this.dataForm.tbItems = []
        this.dataForm.tbItems.push(this.tbItem)
        let specs = this.dataForm.desc.specificationItems
        if (specs != null && specs.length > 0) {
          specs.forEach(v => {
            this.dataForm.tbItems = this.createItems(this.dataForm.tbItems, v.attributeName, v.attributeValue)
          })
        }
      },
      createItems (items, name, value) {
        let newList = []
        items.forEach(v => {
          value.forEach(t => {
            let row = JSON.parse(JSON.stringify(v))
            row.spec[name] = t
            row.categoryId = this.dataForm.goods.category3Id
            newList.push(row)
          })
        })
        return newList
      },
      getCategory1 () {
        this.$http({
          url: this.$http.adornUrl(`/shop/itemcat/category/0`),
          method: 'post'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.category1 = data.category
          }
        })
      },
      addpic () {
        this.dialogVisible = true
        this.fileList = []
        this.itemImg = {}
      },
      savePic () {
        this.dataForm.desc.itemImages.push({'color': this.itemImg.color, 'url': this.itemImg.url})
        this.dialogVisible = false
      },
      uploadPic (v) {
        let data = new FormData()
        data.append('file', v.file)
        this.$http({
          url: this.$http.adornUrl('/shop/goods/uploadPic'),
          method: 'post',
          headers: {'Content-Type': 'multipart/form-data'},
          data
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.itemImg.url = data.url
            this.fileList.push(this.itemImg)
          }
        })
      }
    }
  }
</script>
